<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人管理 - 内容评级平台</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4cc9f0;
            --dark: #1d3557;
            --darker: #0d1b2a;
            --light: #f8f9fa;
            --gray: #8d99ae;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --card-bg: rgba(29, 53, 87, 0.8);
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
            color: var(--light);
            min-height: 100vh;
            background-attachment: fixed;
            line-height: 1.6;
        }



        /* 主内容区样式 */
        .main-content {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        /* 个人管理页面样式 */
        .personal-management {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .management-tabs {
            display: flex;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 2rem;
        }

        .management-tab {
            padding: 1rem 2rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: var(--transition);
            color: var(--light);
            font-weight: 500;
        }

        .management-tab:hover {
            color: var(--accent);
        }

        .management-tab.active {
            border-bottom-color: var(--accent);
            color: var(--accent);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* 个人资料样式 */
        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
        }

        .avatar-container {
            position: relative;
            margin-right: 2rem;
        }

        .avatar-preview {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 50%;
            border: 3px solid var(--accent);
        }

        .avatar-upload {
            position: absolute;
            bottom: 0;
            right: 0;
            background: var(--primary);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .profile-info {
            flex: 1;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .form-control {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.05);
            border-radius: 5px;
            color: var(--light);
            font-size: 1rem;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--accent);
        }

        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1em;
        }

        .btn-save {
            background: var(--primary);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-save:hover {
            background: var(--secondary);
        }

        .message {
            margin-bottom: 1rem;
            padding: 0.8rem;
            border-radius: 5px;
        }

        .error {
            background-color: rgba(244, 67, 54, 0.2);
            color: var(--danger);
        }

        .success {
            background-color: rgba(76, 175, 80, 0.2);
            color: var(--success);
        }

        /* 评论管理样式 */
        .comment-list {
            display: grid;
            gap: 1.5rem;
        }

        .comment-item {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 1.5rem;
            transition: var(--transition);
        }

        .comment-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .comment-title {
            font-size: 1.3rem;
            font-weight: 600;
        }

        .comment-date {
            color: var(--gray);
            font-size: 0.9rem;
        }

        .comment-content {
            color: var(--light);
            margin-bottom: 1rem;
        }

        .comment-actions {
            display: flex;
            gap: 1rem;
        }

        /* 分页控件样式 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 2rem 0;
        }

        .pagination-item {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            color: var(--light);
            cursor: pointer;
            transition: var(--transition);
        }

        .pagination-item:hover, .pagination-item.active {
            background: var(--primary);
            color: white;
            transform: translateY(-3px);
        }

        .pagination-item i {
            font-size: 1rem;
        }

        /* 收藏管理样式 */
        .favorite-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .favorite-item {
            background: var(--card-bg);
            border-radius: 15px;
            overflow: hidden;
            transition: var(--transition);
            position: relative;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            cursor: pointer;
        }

        .favorite-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .favorite-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.8) 90%);
            z-index: 1;
        }

        .favorite-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .favorite-content {
            position: relative;
            z-index: 2;
            padding: 1.5rem;
        }

        .favorite-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .favorite-type {
            color: var(--gray);
            margin-bottom: 1rem;
        }

        .remove-favorite-btn {
            background: var(--danger);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .remove-favorite-btn:hover {
            background: #d32f2f;
            transform: translateY(-2px);
        }

        /* 日志管理样式 */
        .log-list {
            display: grid;
            gap: 1.5rem;
        }

        .log-item {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 1.5rem;
            transition: var(--transition);
        }

        .log-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .log-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .log-title {
            font-size: 1.3rem;
            font-weight: 600;
        }

        .log-meta {
            color: var(--gray);
            font-size: 0.9rem;
            display: flex;
            gap: 1rem;
        }

        .log-content {
            color: var(--light);
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .log-actions {
            display: flex;
            gap: 1rem;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
        }

        .modal-content {
            background: var(--darker);
            margin: 5% auto;
            padding: 2rem;
            border-radius: 15px;
            width: 80%;
            max-width: 800px;
            position: relative;
        }

        .close {
            position: absolute;
            right: 1.5rem;
            top: 1.5rem;
            font-size: 1.5rem;
            color: var(--gray);
            cursor: pointer;
            transition: var(--transition);
        }

        .close:hover {
            color: var(--light);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--light);
            font-weight: 500;
        }

        .form-group input[type="text"],
        .form-group textarea {
            width: 100%;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: var(--light);
            font-size: 1rem;
        }

        .form-group input[type="text"]:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        /* 星星评分样式 */
        .stars {
            color: var(--warning);
            display: flex;
            gap: 5px;
            font-size: 1.2rem;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .header-container {
                flex-direction: column;
                gap: 1rem;
            }

            .nav-links {
                gap: 0.5rem;
                flex-wrap: wrap;
                justify-content: center;
            }

            .auth-buttons {
                margin-top: 1rem;
            }

            .management-tabs {
                flex-wrap: wrap;
            }

            .management-tab {
                padding: 0.8rem 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .modal-content {
                width: 90%;
                margin: 10% auto;
            }

            .favorite-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }

            .profile-header {
                flex-direction: column;
                text-align: center;
            }

            .avatar-container {
                margin-right: 0;
                margin-bottom: 1rem;
            }

            .pagination {
                flex-wrap: wrap;
            }
        }

        @media (max-width: 480px) {
            .management-tabs {
                flex-direction: column;
            }

            .management-tab {
                border-bottom: none;
                border-left: 3px solid transparent;
            }

            .management-tab.active {
                border-bottom: none;
                border-left-color: var(--accent);
            }

            .favorite-grid {
                grid-template-columns: 1fr;
            }

            .log-header {
                flex-direction: column;
                gap: 0.5rem;
            }

            .log-meta {
                flex-wrap: wrap;
            }

            .comment-actions,
            .log-actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<%@ include file="navbar.jsp" %>
<!-- 主内容区 -->
<div class="main-content">
    <div class="personal-management">
        <h1>个人管理中心</h1>

        <div class="management-tabs">
            <div class="management-tab" onclick="switchTab('profile')">
                <i class="fas fa-user"></i> 个人资料
            </div>
            <div class="management-tab active" onclick="switchTab('comments')">
                <i class="fas fa-comments"></i> 我的评论
            </div>
            <div class="management-tab" onclick="switchTab('favorites')">
                <i class="fas fa-heart"></i> 我的收藏
            </div>
            <div class="management-tab" onclick="switchTab('logs')">
                <i class="fas fa-book"></i> 我的日志
            </div>
        </div>

        <!-- 个人资料 -->
        <div id="profile-tab" class="tab-content">
            <c:if test="${not empty message}">
                <div class="message success">${message}</div>
            </c:if>
            <c:if test="${not empty error}">
                <div class="message error">${error}</div>
            </c:if>

            <form action="userProfile" method="post" enctype="multipart/form-data">
                <div class="profile-header">
                    <div class="avatar-container">
                        <img src="${sessionScope.avatar != null ? sessionScope.avatar : 'images/default-avatar.jpg'}"
                             id="avatarPreview" class="avatar-preview" alt="用户头像">
                        <div class="avatar-upload" onclick="document.getElementById('avatarInput').click()">
                            <i class="fas fa-camera"></i>
                            <input type="file" id="avatarInput" name="avatar" accept="image/*" style="display: none;">
                        </div>
                    </div>

                    <div class="profile-info">
                        <h2>${sessionScope.user}</h2>
                        <p>会员ID: ${sessionScope.userId}</p>
                    </div>
                </div>

                <div class="form-group">
                    <label for="gender" class="form-label">性别</label>
                    <select id="gender" name="gender" class="form-control">
                        <option value="male" ${user.gender == 'male' ? 'selected' : ''}>男</option>
                        <option value="female" ${user.gender == 'female' ? 'selected' : ''}>女</option>
                        <option value="other" ${user.gender == 'other' ? 'selected' : ''}>其他</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="email" class="form-label">电子邮箱</label>
                    <input type="email" id="email" name="email" class="form-control"
                           value="${user.email}" required>
                </div>

                <div class="form-group">
                    <label for="phone" class="form-label">手机号码</label>
                    <input type="tel" id="phone" name="phone" class="form-control"
                           value="${user.phone}" required>
                </div>

                <div class="form-group">
                    <label for="birthday" class="form-label">生日</label>
                    <input type="date" id="birthday" name="birthday" class="form-control"
                           value="${user.birthday}">
                </div>

                <div class="form-group">
                    <label for="province" class="form-label">所在省份</label>
                    <input type="text" id="province" name="province" class="form-control"
                           value="${user.province}">
                </div>

                <div class="form-group">
                    <label for="city" class="form-label">所在城市</label>
                    <input type="text" id="city" name="city" class="form-control"
                           value="${user.city}">
                </div>

                <button type="submit" class="btn-save">保存更改</button>
                <a href="change-password.jsp" class="btn btn-outline" style="margin-left: 1rem;">
                    <i class="fas fa-key"></i> 修改密码
                </a>
            </form>
        </div>

        <!-- 评论管理 -->
        <div id="comments-tab" class="tab-content active">
            <h2>我的评论</h2>

            <c:if test="${not empty reviews}">
                <div class="comment-list">
                    <c:forEach items="${reviews}" var="review">
                        <div class="comment-item">
                            <div class="comment-header">
                                <div>
                                    <h3 class="comment-title">
                                        <a href="content-detail.jsp?id=${review.contentId}&type=${review.contentType}">
                                                ${review.content}
                                        </a>
                                    </h3>
                                    <div class="stars">
                                        <c:forEach begin="1" end="5" var="i">
                                            <i class="${review.rating >= i ? 'fas' : 'far'} fa-star"></i>
                                        </c:forEach>
                                    </div>
                                </div>
                                <div class="comment-date">
                                    <fmt:formatDate value="${review.createTime}" pattern="yyyy-MM-dd HH:mm"/>
                                    <c:if test="${review.updateTime != review.createTime}">
                                        (编辑于 <fmt:formatDate value="${review.updateTime}" pattern="yyyy-MM-dd HH:mm"/>)
                                    </c:if>
                                </div>
                            </div>
                            <p class="comment-content">${review.content}</p>
                            <div class="comment-actions">
                                <button class="btn btn-outline"
                                        onclick="location.href='content-detail.jsp?id=${review.contentId}&type=${review.contentType}'">
                                    <i class="fas fa-eye"></i> 查看内容
                                </button>
                                <button class="btn btn-outline" onclick="editComment(${review.id})">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-danger" onclick="deleteComment(${review.id})">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </c:forEach>
                </div>

                <!-- 分页控件 -->
                <div class="pagination">
                    <c:if test="${currentPage > 1}">
                        <div class="pagination-item" onclick="location.href='UserReviewsServlet?page=${currentPage-1}'">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                    </c:if>

                    <c:forEach begin="1" end="${totalPages}" var="i">
                        <div class="pagination-item ${i == currentPage ? 'active' : ''}"
                             onclick="location.href='UserReviewsServlet?page=${i}'">
                                ${i}
                        </div>
                    </c:forEach>

                    <c:if test="${currentPage < totalPages}">
                        <div class="pagination-item" onclick="location.href='UserReviewsServlet?page=${currentPage+1}'">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </c:if>
                </div>
            </c:if>

            <c:if test="${empty reviews}">
                <div class="empty-state">
                    <i class="far fa-comment-dots"></i>
                    <p>您还没有发表过评论</p>
                    <a href="Userindex.jsp" class="btn">浏览内容</a>
                </div>
            </c:if>
        </div>

        <!-- 收藏管理 -->
        <div id="favorites-tab" class="tab-content">
            <h2>我的收藏</h2>
            <div class="favorite-grid">
                <c:forEach var="favorite" items="${userFavorites}">
                    <div class="favorite-item" onclick="location.href='${favorite.contentType}/detail?id=${favorite.contentId}'">
                        <img src="${favorite.imageUrl}" class="favorite-image" alt="${favorite.contentTitle}">
                        <div class="favorite-content">
                            <h3 class="favorite-title">${favorite.contentTitle}</h3>
                            <p class="favorite-type">${favorite.contentType == 'movie' ? '电影' : '图书'}</p>
                            <button class="remove-favorite-btn" onclick="event.stopPropagation(); removeFavorite(${favorite.id})">
                                <i class="fas fa-heart-broken"></i> 取消收藏
                            </button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>

        <!-- 日志管理 -->
        <div id="logs-tab" class="tab-content">
            <div class="log-header">
                <h2>我的日志</h2>
                <button class="btn btn-primary" onclick="showLogEditor()">
                    <i class="fas fa-plus"></i> 新建日志
                </button>
            </div>
            <div class="log-list">
                <c:forEach var="log" items="${userLogs}">
                    <div class="log-item">
                        <div class="log-header">
                            <h3 class="log-title">${log.title}</h3>
                            <div class="log-meta">
                                <span><fmt:formatDate value="${log.createTime}" pattern="yyyy-MM-dd"/></span>
                                <span>${log.viewCount}次浏览</span>
                                <span>${log.likeCount}点赞</span>
                            </div>
                        </div>
                        <div class="log-content">
                                ${log.summary}
                        </div>
                        <div class="log-actions">
                            <button class="btn btn-outline" onclick="location.href='log/detail?id=${log.id}'">
                                <i class="fas fa-eye"></i> 查看详情
                            </button>
                            <button class="btn btn-outline" onclick="editLog(${log.id})">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="btn btn-danger" onclick="deleteLog(${log.id})">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>

<!-- 日志编辑器模态框 -->
<div id="logEditorModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="hideLogEditor()">&times;</span>
        <h2 id="logEditorTitle">新建日志</h2>
        <form id="logForm" action="log" method="POST">
            <input type="hidden" name="action" value="add">
            <input type="hidden" name="logId" id="logId">

            <div class="form-group">
                <label for="logTitle">标题</label>
                <input type="text" id="logTitle" name="title" required>
            </div>

            <div class="form-group">
                <label for="logContent">内容</label>
                <textarea id="logContent" name="content" style="display: none;"></textarea>
                <div id="editor" style="height: 400px;"></div>
            </div>

            <div class="form-actions">
                <button type="button" class="btn btn-outline" onclick="hideLogEditor()">取消</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </form>
    </div>
</div>
<%@ include file="footer.jsp" %>
<!-- 引入Quill富文本编辑器 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<script>
    // 切换标签页
    function switchTab(tabName) {
        document.querySelectorAll('.management-tab').forEach(tab => {
            tab.classList.remove('active');
        });
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.remove('active');
        });

        event.currentTarget.classList.add('active');
        document.getElementById(tabName + '-tab').classList.add('active');
    }

    // 评论操作
    function editComment(commentId) {
        // 跳转到编辑评论页面
        location.href = 'edit_review.jsp?id=' + commentId;
    }

    function deleteComment(commentId) {
        if (confirm('确定要删除这条评论吗？')) {
            fetch('DeleteReviewServlet?id=' + commentId, {
                method: 'GET'
            }).then(response => {
                if (response.ok) {
                    location.reload();
                }
            });
        }
    }

    // 收藏操作
    function removeFavorite(favoriteId) {
        if (confirm('确定要取消收藏吗？')) {
            fetch('favorite?id=' + favoriteId, {
                method: 'DELETE'
            }).then(response => {
                if (response.ok) {
                    location.reload();
                }
            });
        }
    }

    // 日志操作
    let editor;

    function showLogEditor(logId = null) {
        const modal = document.getElementById('logEditorModal');
        const title = document.getElementById('logEditorTitle');
        const form = document.getElementById('logForm');
        const logIdInput = document.getElementById('logId');

        if (logId) {
            title.textContent = '编辑日志';
            form.action.value = 'update';
            logIdInput.value = logId;

            // 加载日志内容
            fetch('log/api?id=' + logId)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('logTitle').value = data.title;
                    editor.setContents(JSON.parse(data.content));
                });
        } else {
            title.textContent = '新建日志';
            form.action.value = 'add';
            logIdInput.value = '';
            document.getElementById('logTitle').value = '';
            editor.setContents('');
        }

        modal.style.display = 'block';
    }

    function hideLogEditor() {
        document.getElementById('logEditorModal').style.display = 'none';
    }

    function editLog(logId) {
        showLogEditor(logId);
    }

    function deleteLog(logId) {
        if (confirm('确定要删除这篇日志吗？')) {
            fetch('log?id=' + logId, {
                method: 'DELETE'
            }).then(response => {
                if (response.ok) {
                    location.reload();
                }
            });
        }
    }

    // 头像预览功能
    document.getElementById('avatarInput').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                document.getElementById('avatarPreview').src = event.target.result;
            }
            reader.readAsDataURL(file);
        }
    });

    // 初始化富文本编辑器
    document.addEventListener('DOMContentLoaded', function() {
        editor = new Quill('#editor', {
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'image'],
                    ['clean']
                ]
            },
            placeholder: '写下你的日志内容...',
            theme: 'snow'
        });

        // 表单提交前将编辑器内容同步到textarea
        document.getElementById('logForm').addEventListener('submit', function() {
            const content = JSON.stringify(editor.getContents());
            document.getElementById('logContent').value = content;
        });
    });
</script>
</body>
</html>